<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: tableHeader('文档添加')" />
	<style type="text/css">
		.modal-dialog {
			position: fixed;
			left: 25%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.modal-backdrop {
			position: static;
			top: 0px;
			right: 0px;
			bottom: 0px;
			left: 0px;
			z-index: 1040;
			background-color: rgb(0, 0, 0);
		}
		.modal-content {
			padding: 0 20px;
		}
	</style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-notice-add">
			<div class="col-xs-9">
				<label class="col-sm-2 control-label">内容：</label>
				<div class="col-sm-7" id="title1a" >
					<textarea id="title1b" name="content" class="summernote"></textarea>
				</div>
			</div>
			<div class="col-xs-3">
				<div class="form-group">
					<div class="col-sm-8">
						<input id="title1" name="title" class="form-control" type="text" required placeholder="标题">
					</div>
					<div class="col-sm-1" >
						<i class="fa fa-plus-square select-add" title="添加" style="font-size:24px; cursor:pointer;" onclick="add()"></i>
					</div>
				</div>
			</div>
		</form>
	</div>
	<th:block th:include="include :: tableFooter" />
    <script type="text/javascript">
        var prefix = "/documentation";

		$(document).ready(function () {
			$('#title1b').summernote({
				placeholder: '请输入内容',
				lang: 'zh-CN',
				height: 550,
				width: 489,
				callbacks: {
					onImageUpload: function (files) {
						sendFile(files[0], this);
					},
					onMediaDelete: function (target) {
						removeFile(target.context.dataset.filename)
					}
				}
			});

		});

		// 上传文件
		function sendFile(file, obj) {
			console.log(obj)
			var data = new FormData();
			data.append("file", file);
			$.ajax({
				type: "POST",
				url:"/common/upload",
				data: data,
				cache: false,
				contentType: false,
				processData: false,
				dataType: 'json',
				success: function(result) {
					if (result.code == 0) {
						$(obj).summernote('editor.insertImage', result.url, result.fileName);
					} else {
						layer.msg(result.msg);
					}
				},
				error: function(error) {
					layer.msg("图片上传失败。");
				}
			});
		}

		// 删除文件
		function removeFile(fileName) {
			$.ajax({ url: "/common/remove", type: "POST",data: {"fileName":fileName}, success: function(result){
					if(result.code != 0){
						layer.msg(result.msg);
					}
				}});
		}

		function submitHandler() {
			var Documentation ={};
			var inputs = $("input[name='title']");
			var documentationDetailss = [];
			var i = 1;
			inputs.each(function(){
				var DocumentationDetails = {};
				DocumentationDetails.sort = i++;
				DocumentationDetails.title = this.value;
				DocumentationDetails.content = $("#"+this.id+"b").summernote('code');
				documentationDetailss.push(DocumentationDetails);
			});
			Documentation.documentationDetailss = documentationDetailss;
			console.log(JSON.stringify(Documentation));
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url : "/documentation/add",
				//数据，json字符串
				data :JSON.stringify(Documentation),
				//请求成功
				beforeSend: function () {
					layer.load(2);
				},
				success: function(result) {
					var parent = window.parent;
					if(result.code == 0) {
						parent.$.table.refresh();
						var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
						parent.layer.close(index); //再执行关闭
					}else{
						layer.msg("添加失败！")
					}
				}
			});
		}

		function add() {
			var id = "title"+Math.ceil(Math.random() * 100000);
			$(".col-xs-3").append("<div class=\"form-group\">" +
					"<div class=\"col-sm-8\">\n" +
					" <input id=\""+id+"\" name=\"title\" class=\"form-control\" type=\"text\" required placeholder=\"标题\">\n" +
					" </div>\n" +
					" <div class=\"col-sm-1\" >\n" +
					" <i class=\"fa fa-trash-o select-del\" data-id=\""+id+"\" \""+id+"\" title=\"删除\" style=\"font-size:24px; cursor:pointer;\" onclick=\"remove(this)\"></i>\n" +
					" <div>\n" +
					" </div>\n")
			$(".col-xs-9").append("<div class=\"col-sm-7\" id=\""+id+"a\" style=\"display: none\">\n" +
					"<textarea id=\""+id+"b\" name=\"content\" ></textarea>\n" +
					"</div>");
			$("#"+id+"b").summernote({
				placeholder: '请输入内容',
				lang: 'zh-CN',
				height: 550,
				width: 489,
				callbacks: {
					onImageUpload: function (files) {
						sendFile(files[0], this);
					}
				}
			});
		}
		$(".col-xs-3").on("focus","input[name='title']",function(){
			console.log(this)
			$(".col-sm-7").hide();
			$("#"+this.id+"a").show();
		});
		function remove(e) {
			console.log(e)
			e.closest('.form-group').remove();
			$("#"+e.getAttribute("data-id")+"a").remove();
		}
	</script>
</body>
</html>
